<template>
	<view>
		<loading ref="loading"></loading>
		<view class="" v-if="loadFlag">
			<u-navbar :is-back="false" :title="vk.getVuex('$setting.base.search')?vk.getVuex('$setting.base.name'):' '" :background="{backgroundColor: vk.getVuex('$app.config.bg.navbar')}" :title-color="vk.getVuex('$app.config.color.main')" :border-bottom="false">
				<view class="slot-wrap">
					<view class="u-flex u-row-between" style="width: 100%;" v-if="!vk.getVuex('$setting.base.search')">
						<view class="" style="width: 52rpx;height: 52rpx;position: relative;">
							<u-icon name="/static/icon/shares.png" size="52"></u-icon>
							<button open-type="share" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;"></button>
						</view>
						<view class="search u-flex u-row-left" @click="search" style="z-index: 1000;" :style="{color: vk.getVuex('$app.config.color.light'),background: vk.getVuex('$app.config.bg.search')}">
							<u-icon name="/static/search.png" size="28"></u-icon>
							<text class="u-p-l-15">请输入关键字搜索</text>
						</view>
					</view>
				</view>
			</u-navbar>
			<view class="u-p-t-10" style="background-image: linear-gradient(#1F1F1F, #161616);">
				<view class="u-p-t-15 u-p-l-20 u-p-r-20">
					<u-swiper
						height="300"
						bg-color="rgba(0,0,0,0)"
						name="image"
						:interval="4000"
						border-radius="16"
						:list="bannerList"
						@click="bannerClick"
					></u-swiper>
				</view>
			</view>
			<view style="position: sticky;z-index: 9;pointer-events: none;" :style="{top: navHeight+'rpx', height: 'calc(100vh - '+navHeight+'rpx)'}">
				<view class="u-p-l-20 u-p-r-20 u-p-t-30 u-p-b-50" style="background-color: #161616;position: relative;margin-bottom: -20rpx;">
					<view class="sub u-flex u-row-between u-text-center" style="pointer-events: auto;">
						<view class="s" :class="modeCurrent === -1?'sub_active':''" :style="{borderRadius: modeCurrent === -1?'12rpx 0 0 12rpx':''}" @click="modeClick(-1)">全部</view>
						<view class="s" :class="modeCurrent === 0?'sub_active':''" :style="{borderRadius: modeCurrent === 2?'0':''}" @click="modeClick(0)">静态</view>
						<view class="s" :class="modeCurrent === 1?'sub_active':''" :style="{borderRadius: modeCurrent === 2?'0':''}" @click="modeClick(1)">动态</view>
						<view class="s" :class="modeCurrent === 2?'sub_active':''" :style="{borderRadius: modeCurrent === 2?'0 12rpx 12rpx 0':''}" @click="modeClick(2)">动态音效</view>
					</view>
				</view>
				<view class="u-flex u-col-center" style="background-color: #1F1F1F;border-radius: 18rpx 18rpx 0 0;height: 100rpx;position: relative;">
					<view class="u-flex u-row-around u-font-13" style="width: 100%;pointer-events: auto;">
						<view class="cate" :class="sortCurrent === 4?'cate_active':''" @click="sortClick(4)">默认↓</view>
						<view class="cate" :class="sortCurrent === 0?'cate_active':''" @click="sortClick(0)">时间↓</view>
						<view class="cate" :class="sortCurrent === 1?'cate_active':''" @click="sortClick(1)">时间↑</view>
						<view class="cate" :class="sortCurrent === 2?'cate_active':''" @click="sortClick(2)">价格↑</view>
						<view class="cate" :class="sortCurrent === 3?'cate_active':''" @click="sortClick(3)">价格↓</view>
					</view>
				</view>
				<view class="" :style="{height: 'calc(100vh - 220rpx - '+navHeight+'rpx);'}">
					<scroll-view scroll-y scroll-with-animation class="u-tab-view" :scroll-top="scrollTop" style="pointer-events: auto;">
						<view class="u-tab-item u-flex u-row-center u-col-center" :class="cateCurrent === index?'u-tab-item-active':''" 
						v-for="(item, index) in cateList" :key="index"
						@click="cateClick(index)">
							<view class="h u-font-13">
								<view class="">{{item.name.substr(0,2)}}</view>
								<view class="">{{item.name.substr(2,2)}}</view>
							</view>
						</view>
						<view class="" style="height: 300rpx;"></view>
					</scroll-view>
				</view>
			</view>
			<view class="u-flex u-row-right">
				<view class="u-menu-wrap" :style="{marginTop: 'calc(-100vh + 220rpx + '+navHeight+'rpx);', minHeight: 'calc(100vh - 220rpx - '+navHeight+'rpx);'}">
					<view class="item-title u-text-center">
						<text>👈点击「分类/排序」进行筛选＋取消筛选👆</text>
					</view>
					<view class="u-flex u-row-left u-flex-wrap u-p-b-30">
						<view class="thumb-box u-m-t-25 u-m-l-25 u-p-b-15" v-for="(item, index) in tipList" :key="index" @click="detailClick(item._id)">
							<view class="" style="width: 100%;height: 360rpx;position: relative;">
								<image lazy-load class="item-menu-image" :src="item.image" mode="aspectFill"></image>
								<view class="" style="width: 100%;height: 100rpx;position: absolute;bottom: 0;background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.2));"></view>
								<!-- <view class="cdk">库存 {{item.cdkList.length}}</view> -->
							</view>
							<view class="item-menu-name u-text-center u-p-t-10 u-p-b-5 u-line-1 u-p-l-15 u-p-r-15">{{item.name}}</view>
							<!-- <view class="item-menu-btn u-text-center u-p-t-10 u-p-b-10 u-m-l-20 u-m-r-20">立即兑换</view> -->
							
							<image class="rang" src="/static/rings.svg"></image>
							<view class="bill u-flex u-row-right">
								<u-icon :name="vk.getVuex('$setting.score.icon')" size="28"></u-icon>
								<view class="u-p-l-10" style="font-weight: 550;">{{item.score}}</view>
							</view>
							
						</view>
					</view>
					<view class="" v-if="!noData"><u-loadmore :status="loadStatus" font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8" /></view>
					<nodata v-else width="620rpx"></nodata>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let systemInfo = uni.getSystemInfoSync();
	// px转换到rpx的比例
	let pxToRpxScale = 750 / systemInfo.windowWidth;
	// 状态栏的高度
	let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale;
	// 导航栏的高度
	let navigationHeight = 44 * pxToRpxScale;
	// 总高度
	let navHeight = ktxStatusHeight + navigationHeight;
	export default {
		data() {
			return {
				loadFlag: false,
				bannerList: [],
				cateList: [],
				cateCurrent: -1,
				tipList: [],
				modeCurrent: -1,
				sortCurrent: -1,
				// 无数据
				noData: false,
				// 分页
				pageIndex: 0,
				loadStatus: 'loading',
				navHeight: navHeight,
				background: {
					backgroundColor: '#1F1F1F'
				},
			}
		},
		async onLoad() {
			let that = this
			await that.getBannerList()
			await that.getCateList()
			await that.getTipList()
			that.loadFlag = true
			that.$nextTick(() => {
				that.$refs.loading.closeLoading()
			})
		},
		methods: {
			async getBannerList(){
				let that = this
				let res = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data: {
						dbName: 'bus-wx-advert',
						whereJson: {
							postion: 2,
							status: 1
						},
					}
				});
				that.bannerList = res.rows
			},
			async getCateList(){
				var that = this
				let list = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data:{
						dbName: 'bus-wx-category',
						pageIndex: 1,
						pageSize: 500,
						whereJson: {
							mode: 4,
							status: 1
						},
						sortArr: [{name: '_add_time', type: 'asc'}],
					},
				});
				that.cateList = list.rows
			},
			async getTipList(on){
				let that = this
				
				// 点击切换菜单 回复初始状态
				let newList = that.tipList 
				if(on == 1){
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					newList = []
					that.pageIndex = 0
				}
				that.pageIndex = that.pageIndex + 1
				that.loadStatus = 'loading'
				
				let whereJson = {
					status: 1
				}
				let sortArr = [{name: '_add_time', type: 'desc'}]
				if(that.modeCurrent !== -1) whereJson.mode = that.modeCurrent
				if(that.cateCurrent !== -1) whereJson.category_id = that.cateList[that.cateCurrent]._id
				if(that.sortCurrent === 0) sortArr = [{name: '_add_time', type: 'desc'}]
				if(that.sortCurrent === 1) sortArr = [{name: '_add_time', type: 'asc'}]
				if(that.sortCurrent === 2) sortArr = [{name: 'score', type: 'asc'}]
				if(that.sortCurrent === 3) sortArr = [{name: 'score', type: 'desc'}]
				if(that.sortCurrent === 4) sortArr = [{name: '_add_time', type: 'desc'}]
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/pub/getList',
					data: {
						dbName: 'bus-wx-tip',
						pageIndex: that.pageIndex,
						pageSize: 30,
						whereJson: whereJson,
						sortArr: sortArr,
					}
				});
				that.tipList = newList.concat(data.rows)
				if(data.hasMore) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				if(data.total == 0) that.noData = true
				else that.noData = false
				uni.hideLoading()
			},
			bannerClick(index){
				let that = this
				var advert = this.bannerList[index];
				if (advert.plan === 0) {
					uni.navigateTo({
						url: '/pages/detail/detail?id=' + advert.detail_id + '&index=0'
					});
				} else if (advert.plan === 1) {
					uni.navigateTo({
						url: '/pages/detail/avatar?id=' + advert.detail_id + '&index=0'
					});
				} else if (advert.plan === 2) {
					uni.navigateTo({
						url: '/pages/trends/detail?id=' + advert.detail_id
					});
				} else if (advert.plan === 3) {
					uni.navigateTo({
						url: '/pages/detail/special?id=' + advert.special_id
					});
				} else if (advert.plan === 4) {
					uni.navigateToMiniProgram({
						appId: advert.appid,
						path: advert.pages,
						success(res) {}
					});
				} else if (advert.plan === 5) {
					uni.navigateTo({
						url: '/pages/about/link?url=' + encodeURIComponent(advert.url) + '&name=' + advert.name
					});
				} else if (advert.plan === 6) {
					if(advert.pages === '/pages/write/auth'){
						if(that.vk.getVuex('$setting.client.verify')){
							uni.navigateTo({
								url: '/pages/write/stats'
							})
							return
						}
						if(that.vk.getVuex('$user.userInfo.auth.status') === 1){
							uni.navigateTo({
								url: '/pages/write/stats'
							})
						}else{
							uni.navigateTo({
								url: '/pages/write/auth'
							})
						}
					}else{
						uni.navigateTo({
							url: advert.pages
						});
					}
				}
			},
			async cateClick(index){
				let that = this
				if(that.cateCurrent === index){
					that.cateCurrent = -1
				}else{
					that.cateCurrent = index
				}
				await that.getTipList(1)
			},
			async modeClick(index){
				
				let that = this
				if(that.modeCurrent === index){
					that.modeCurrent = -1
				}else{
					that.modeCurrent = index
				}
				await that.getTipList(1)
			},
			async sortClick(index){
				let that = this
				if(that.sortCurrent === index){
					that.sortCurrent = -1
				}else{
					that.sortCurrent = index
				}
				await that.getTipList(1)
			},
			detailClick(id){
				uni.navigateTo({
					url: '/pages/tip/detail?id='+id
				})
			},
		},
		onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			that.getTipList()
		}
	}
</script>
<style lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx;
	}
	.search{
		background: #282828;
		height: 58rpx;
		margin-left: 25rpx;
		padding-left: 30rpx;
		border-radius: 50px;
		width: 100%;
		text{
			color: #808080;
			font-size: 13px;
		}
	}
	.u-menu-wrap {
		background-color: #282828;
		width: calc(100vw - 130rpx);
		padding: 20rpx 0;
		z-index: 7;
		position: relative;
	}
	.u-tab-view {
		width: 130rpx;
		height: 100%;
		background-color: #1F1F1F;
	}
	.u-tab-item {
		height: 110rpx;
		.h{
			background: #282828;
			border-radius: 12rpx;
			color: #808080;
			padding: 8rpx 20rpx;
		}
	}
	.u-tab-item-active {
		.h{
			background: #ff3f3c;
			color: #FFFFFF;
		}
	}
	
	.u-tab-view {
		height: 100%;
	}
	
	.item-title {
		font-size: 26rpx;
		color: #808080;
		background-color: #1F1F1F;
		border-radius: 12rpx;
		padding: 15rpx;
		margin: 0 25rpx;
	}
	
	.item-menu-name {
		// font-weight: 550;
		color: #FFFFFF;
	}
	
	.item-menu-btn {
		background-color: #ff3f3c;
		color: #FFFFFF;
		font-size: 26rpx;
		border-radius: 30rpx;
		font-weight: 500;
	}
	
	.thumb-box {
		width: calc(50% - 36rpx);
		background-color: #1F1F1F;
		border-radius: 12rpx;
		position: relative;
	}
	
	.item-menu-image {
		width: 100%;
		height: 360rpx;
		border-radius: 12rpx 12rpx 0 0;
	}
	.cate{
		background-color: #282828;
		border-radius: 30rpx;
		padding: 8rpx 20rpx;
		color: #808080;
		margin: 0 15rpx;
		white-space:nowrap;
	}
	.cate_active{
		background-color: #ff3f3c!important;
		color: #FFFFFF!important;
	}
	.sub{
		background-color: #ff3f3c;
		border-radius: 12rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		.s{
			width: 25%;
		}
		.sub_active{
			background-color: #e01a1b;
			font-weight: 500;
		}
	}
	
	
	.rang{
		width: 104rpx;
		height: 104rpx;
		position: absolute;
		top: 120rpx;
		left: 90rpx;
	}
	.bill{
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		background-color: rgba(0,0,0,0.3);
		color: #FFFFFF;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		font-size: 12px;
	}
	.cdk{
		position: absolute;
		top: 15rpx;
		left: 15rpx;
		background-color: rgba(0,0,0,0.3);
		color: #FFFFFF;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		font-size: 12px;
	}
</style>